<template>
  <view class="container" style="padding-bottom: 90px">
    <!--  tab 栏 -->
    <view class="wh100">
      <view
        class="data-empty-wh100"
        v-if="pageList == null || pageList.length == 0"
      >
        <u-empty :text="`${subject}为空~~`" />
      </view>
      <view v-else class="items-container" style="padding-bottom: 90px">
        <view
          @click="onItemClick(item)"
          class="items"
          :id="`menu-${item.id}`"
          v-for="item of pageList"
          :key="item.id"
        >
          <text class="item-title">{{
            item[itemName] == null ? "无" : item[itemName]
          }}</text>
          <view>
            <text style="margin-right: 5px">
              {{ item.statusName }}
            </text>
          </view>
        </view>
        <!-- 加载更多 -->
        <li-loadmore
          :status="loadStatus"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
          @loadmore="onReachBottomEvent"
        />
      </view>
    </view>
    <view class="bottom-add" @click="btnAddClick"> 新建{{ subject }} </view>
  </view>
</template>

<script>
import {
  uShowLoading,
  uHideLoading,
  utoast,
  uNavigateBack,
  uNavigateTo,
  uSwitchTab,
  uSetNavigationBarTitle,
} from "../../../utils/uniUtils.js";

import { storeId } from "../../../constants/apiConstants";
import liListMixin from "../../../mixins/liListMixin";
import { GetSalesPromotionList } from "../../../common/modules/business.js";

export default {
  mixins: [liListMixin],
  data() {
    return {
      itemName: "name", // pageList 每一项的标题
      subject: "活动", // 主题
      activeStyle: {
        color: "#F3C45D",
      },
      tabMenusIdx: 0, // tab的下标
      tabMenus: null, // 上tab
      leftMenus: null, // 左tab
      leftMenusIdx: null, // 左tab
      pageList: [], // 内容列表
      rootRoute: "workbench",
      routeName: "couponScan",
      pageListFn: GetSalesPromotionList,
      isLoaded: false, //  控制页面是否显示
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
      loadStatus: "loadmore",
      loadingText: "努力加载中。。。",
      loadmoreText: "上拉加载更多~~",
      nomoreText: "实在没有了",
    };
  },
  onReachBottom() {
    this.onReachBottomEvent();
  },
  async mounted() {
    try {
      uSetNavigationBarTitle("活动管理");
      uShowLoading();
      await this.GetPageList();
      this.isLoaded = true;
    } catch (error) {
      console.log("err", error);
      utoast("初始化失败！", "error");
      setTimeout(() => {
        uSwitchTab("/pages/tabBar/staging");
      }, 800);
    } finally {
      uHideLoading();
    }
  },
  methods: {
    onReachBottomEvent() {
      this.reachBtm(this);
    },

    async onTabClick(e) {
      this.onTabClickEvent(e, this);
    },

    async GetPageList(idx = 0) {
      console.log("GetPageList");

      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      //  有  tabMenu时放开
      //   if (this.tabMenus[idx] != null) {
      if (this.showLoadMore) {
        this.pageNum += 1;
      }

      this.loadStatus = "loading";

      let res = await this.pageListFn({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // storeId: storeId,
      });
      let list = res.data?.list || res.data;
      this.total = res.data?.total || res.count;
      this.pageList = [...this.pageList, ...list];

      if (this.pageList.length == this.total) {
        this.loadStatus = "nomore";
      } else {
        this.loadStatus = "loadmore";
      }
      this.showLoadMore = false;
      // console.log("tagList", list);
      //   }
    },

    async btnAddClick() {
      this.btnAddClickEvent(this);
    },

    onItemClick(item) {
      this.onItemClickEvent(item, this);
    },

    operate: async function (e, item, type) {
      e.stopPropagation();
      const fn = type == 1 ? examineDiscountRules : stopDiscountRules;
      const { data, code, msg } = await fn({ id: item.id });
      if (code == 1) {
        utoast(msg);
      }
      await this.resetList();
    },

    // methods put on the top
  },
};
</script>

<style lang="scss" scoped>
@import "~@/static/styles/commonStyle.scss";
.container {
  height: 100.1vh;
}
</style>
